<template>
  <div class="card">
    <div class="koala-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
        <path d="M260.7 108.8c34.5-9.7 67.7-24.7 96-46.9C397.1 29.4 428.9 5 474.7 1.1 495 0 507.1 13.4 511 37c2.2 30.2-7.8 55.4-23.1 78.2-18.4 27.2-42.8 49.1-68.9 68.8-41 30.8-82.4 61-123.8 91.3-31.2 22.9-62.6 45.7-93.5 69.1-8.3 6.3-15.9 13.7-23.7 20.6-2.2 2-4.2 4.6-5.4 7.3-12.2 25.7-24.2 51.6-36.2 77.4-3 6.5-5.3 13.3-8 20-1.5 3.8-3.3 7.6-5.3 11.2-7 12.8-20.9 11.6-27-2-9.3-20.8-6.3-41.8-.5-63 6.3-23.2 13.1-46.3 19.7-69.4.9-3.1 2-6.1 2.5-9.3 .8-5.3-1.3-9.8-5.3-12.7-10.1-7.4-20.8-14-31.2-21-13.5-9-26.9-18-40.4-27-6.5-4.4-13.2-8.5-19.6-13.1-14.8-10.6-24.6-25.4-29.5-43.3C-4 125.1-1.8 108.8 6.4 93.2c11.9-22.5 32.9-32.5 57.2-34.2 14.8-1 29.4 .8 43.5 5.1 12.4 3.8 24.5 8.6 36.7 13.1 8.2 3 16.3 6.6 24.7 8.8 18.8 5 38 8.6 57.2 10.3 1.7 .1 3.4 .4 5.1 .5 9.7 1 19.4 2 29.9 2z"/>
      </svg>
    </div>
    <div class="content">
      <h1 class="title">{{ title }}</h1>
      <p class="description">{{ description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoalaCard',
  props: {
    title: {
      type: String,
      default: "Hello, I'm Koala, Nice to meet you!"
    },
    description: {
      type: String,
      default: "Koala致力于实现全任务场景下自编程、自发布、自部署，加速AGI普惠人类"
    }
  }
}
</script>

<style scoped>
.card {
  width: 600px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(38, 50, 84, 1) 0%, rgba(58, 55, 87, 1) 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.koala-icon {
  width: 70px;
  height: 70px;
  margin-right: 15px;
  color: #6c8cff;
  font-size: 60px;
}

.content {
  color: white;
}

.title {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bolder;
}

.description {
  font-size: 14px;
  opacity: 0.9;
}
</style>
